<template>
    <el-form ref="form" :model="form" label-width="80px" style="width: 400px;"  align="center">
        <el-form-item label="活动名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        
        <el-upload
            class="upload-demo"
            ref="upload"
            action="BASE_API+'/gcservice/video/uploadAlyuVideo'"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            <div slot="tip" class="el-upload__tip">只能上传avi文件，且不超过500kb</div>
        </el-upload>


        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即上传</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
</template>

      <script>
        import video from '@/api/vod'
        export default {
          data() {
            return {
              form: {
                name: '',
                videoId:''
              },
              fileList: [],//上传文件列表
              BASE_API: process.env.BASE_API // 接口API地址
            }
          },
          methods: {
            onSubmit() {
              console.log('submit!');
            },


            submitUpload(file) {
              video.uploadvideo(file)
              .then(response =>{
                // this.form=response.data.videoId
                // file.name = this.form.name                 
                console.log(file)
                // console.log(this.form.name)
              })

              
            },


            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            }
          }
        }
      </script>